<template>
    <Editor api-key="gfbunq3oyfdik06qqwd9v0waeke7z46yggnjo2w8k17ax0gl" v-model="value" :init="option" />
</template>
<script setup>
import Editor from '@tinymce/tinymce-vue';
import { ref, watch } from 'vue';
import { upload } from '@/api/common';

let props = defineProps(['content', 'value']);
let emit = defineEmits(['update:content']);

watch(props, () => {
    value.value = props.content
})
let value = ref(props.value);

// 上传文件
function uploadFile(file, callback) {
    let data = new FormData();
    data.append("file", file);
    upload(data).then(res => {
        let file = res.data,
        path = file.path;
        callback(path);
    })
}
let option = {
    language: 'zh_CN',
    plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap pagebreak nonbreaking anchor insertdatetime advlist lists wordcount help emoticons autosave autoresize',
    toolbar: ['code undo redo restoredraft cut copy paste pastetext fontsize fontsizeselect forecolor backcolor bold italic underline strikethrough link anchor alignleft aligncenter alignright alignjustify outdent indent styleselect formatselect fontselect ',
        ' bullist numlist blockquote subscript superscript removeformat table image media charmap emoticons hr pagebreak insertdatetime print preview  fullscreen bdmap indent2em lineheight formatpainter axupimgs'],
    width: 1000,
    min_height: 400,
    image_dimensions: false,
    convert_urls:false,
    font_size_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
    images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
        uploadFile(blobInfo.blob(), resolve);
    }),
    file_picker_callback: (callback, value, meta) => {
        //模拟出一个input用于添加本地文件
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.click();
        input.onchange = function () {
            uploadFile(this.files[0], callback);
        }
    },
    setup: (editor) => {
        // 获取内容
        editor.on('input change undo redo execCommand KeyUp', () => emit('update:content', editor.getContent()));
    }
}


</script>